<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #app {
            width: 500px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table tr th,
        table tr td {
            height: 35px;
            border-bottom: solid 1px #999;
            text-align: center;
        }
        .clear-btn {
            text-align: right;
        }
    </style>
</head>

<body>
<div id="app">
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <tr v-for="(obj,index) in arr">
            <td>{{obj.userId}}</td>
            <td>{{obj.userName}}</td>
            <td>{{obj.userAge}}</td>
            <td><button @click="del(index)">删除</button></td>
        </tr>
        <tr>
            <td colspan="4"><button @click="clear">清空</button></td>
        </tr>
    </table>

    <h3>添加</h3>
    姓名：<input type="text" v-model="userName"><br>
    年龄：<input type="text" v-model="userAge"><br>
    <button @click="add">添加</button>
</div>
<script src="vue.global.js"></script>
<script src="https://unpkg.com/vue@next"></script>
<script>
    Vue.createApp({
        data() {
            return {
                arr: [
                    {
                        userId: 1,
                        userName: '张三',
                        userAge: 20
                    }, {
                        userId: 2,
                        userName: '李四',
                        userAge: 21
                    }, {
                        userId: 3,
                        userName: '王五',
                        userAge: 22
                    }
                ],
                userName: '',
                userAge: 0
            }
        },
        methods: {
            add() {
                let userId = 0;
                if (this.arr.length == 0) {
                    userId = 1;
                } else {
                    userId = this.arr[this.arr.length - 1].userId + 1;
                }
                this.arr.push({
                    userId: userId,
                    userName: this.userName,
                    userAge: this.userAge
                });
            },
            del(index) {
                this.arr.splice(index, 1);
            },
            clear() {
                this.arr.splice(0, this.arr.length);
                //this.arr = [];
            }
        }
    }).mount('#app')
</script>
</body>
</html>